<!DOCTYPE html>
<html>
<head>
<#include "/common/freemarker/include_css.ftl">
<title>圆盘抽奖</title>


<style type="text/css">

*{padding:0;margin:0}

body{

	text-align: center;

	background-color: #1664ad;

}

.ly-plate{

	position:relative;

	width:254px;

	height:254px;

	margin: 50px auto;

}

.rotate-bg{

	width: 254px;

	height: 254px;

	background: url(<@context_module_real/>images/ly-plate-min.png);

	position: absolute;

	top: 0;

	left: 0;

	margin-top: 0%;

}

.ly-plate div.lottery-star{

	width:107px;

	height:107px;

	position:absolute;

	top:75px;

	left:72px;

	/*text-indent:-999em;

	overflow:hidden;

	background:url(<@context_module_real/>images/rotate-static-min.png);

	-webkit-transform:rotate(0deg);*/

	outline:none

}

.ly-plate div.lottery-star #lotteryBtn{

	cursor: pointer;

	position: absolute;

	top:0;

	left:0;

	*left:-107px

}

</style>

</head>

<body>



<div class="ly-plate">

  <div class="rotate-bg"></div>

	<div class="lottery-star"><img src="<@context_module_real/>images/rotate-static-min.png" id="lotteryBtn"></div>

</div>




 	<#--  公共js -->
	<#include "/common/freemarker/include_js.ftl">
	

 

<script type="text/javascript" src="<@context/>js/jQueryRotate.2.2.js"></script>

<script type="text/javascript" src="<@context/>js/jquery.easing.min.js"></script>



<script type="text/javascript">

$(function(){

	var timeOut = function(){  //超时函数

		$("#lotteryBtn").rotate({

			angle:0, 

			duration: 10000, 

			animateTo: 1080, //这里是设置请求超时后返回的角度，所以应该还是回到最原始的位置，2160是因为我要让它转6圈，就是360*6得来的

			callback:function(){

				alert('网络超时')

			}

		}); 

	}; 

	var rotateFunc = function(awards,angle,text){  //awards:奖项，angle:奖项对应的角度

		$('#lotteryBtn').stopRotate();

		$("#lotteryBtn").rotate({

			angle:0, 

			duration: 5000, 

			animateTo: angle+1440, //angle是图片上各奖项对应的角度，1440是我要让指针旋转4圈。所以最后的结束的角度就是这样子^^

			callback:function(){

				alert(text)

			}

		}); 

	};

	

	$("#lotteryBtn").rotate({ 

	   bind: 

		 { 

			click: function(){

				var time = [0,1];

					time = time[Math.floor(Math.random()*time.length)];
					time=1;//add by lgc

				if(time==0){

					timeOut(); //网络超时

				}

				if(time==1){
					 var data={};
					 $.ajax({ 
						url: "<@context/>ued/prize/doDraw.do", 
						type: "GET",
						data: data, 
						dataType:"json",
						success: function(rhs) {
						    var prize=rhs["data"];
					 		if (prize!=null){
								if(prize.myLevel==1){
									rotateFunc(1,157,'恭喜您抽中的一等奖:'+prize.name)
								}
								if(prize.myLevel==2){
									rotateFunc(2,247,'恭喜您抽中的二等奖:'+prize.name)
								}
								if(prize.myLevel==3){
									rotateFunc(3,22,'恭喜您抽中的三等奖:'+prize.name)
								}
					 		}else{
					 			var angle = [67,112,202,292,337];
								angle = angle[Math.floor(Math.random()*angle.length)]
								rotateFunc(0,angle,'很遗憾，这次您未抽中奖')
					 		}
						},
						error: function(errMsg) {
							alert(errMsg);
						}
					}); 
			
					<#-- 
					var data = [1,2,3,0]; //返回的数组

					data = data[Math.floor(Math.random()*data.length)];
					
					if(data==1){

						rotateFunc(1,157,'恭喜您抽中的一等奖')

					}

					if(data==2){

						rotateFunc(2,247,'恭喜您抽中的二等奖')

					}

					if(data==3){

						rotateFunc(3,22,'恭喜您抽中的三等奖')

					}

					if(data==0){

						var angle = [67,112,202,292,337];

							angle = angle[Math.floor(Math.random()*angle.length)]

						rotateFunc(0,angle,'很遗憾，这次您未抽中奖')

					}
					-->
				}

			}

		 } 

	   

	});

	

})

</script>	

 

</body>


 
</html>